<template>
    <div class="Screen1">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>

</template>

<script>

    export default {
        name: "Header",
        data() {
            return {

            }
        },
        created() {

        },
        methods: {
            negate() {
                this.$store.commit('negate');
                console.log(this.$store.state.screen)
            }
        }


    };


    //********  JQ   **********

</script>

<style lang="scss" scoped>
    .Screen1 {
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: #f0f0f0;

    }

    .div1 {
        position: absolute;
        top: 50vh;
        left: 47vw;

        width: 100px;
        height: 100px;
        background: #363541;
        clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
        animation: myfirst 5s linear infinite;

    }

    .div2 {
        position: absolute;
        top: 52vh;
        left: 48vw;

        width: 100px;
        height: 100px;
        background: #363541;
        -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
        animation: myfirst2 5s linear infinite;

    }

    @media screen and (max-width: 1300px) {
        .div1 {
            position: absolute;
            top: 50vh;
            left: 46vw;

            width: 100px;
            height: 100px;
            background: #363541;
            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
            animation: myfirst 5s linear infinite;

        }


        .div2 {
            position: absolute;
            top: 52vh;
            left: 47vw;

            width: 100px;
            height: 100px;
            background: #363541;
            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
            animation: myfirst2 5s linear infinite;

        }
    }

    @keyframes myfirst {
        0% {
            transform: rotate(0deg);
            width: 100px;
            height: 87px;
            opacity: 1;
            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
        }
        50% {
            transform: rotate(180deg);

            opacity: 0.2;
            clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
        }
        100% {
            transform: rotate(360deg);
            width: 100px;
            height: 87px;
            opacity: 1;
            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
        }


    }

    @keyframes myfirst2 {
        0% {
            opacity: 0.2;
            transform: rotate(360deg);
            width: 100px;
            height: 87px;
            /*opacity: 1;*/
          clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
        }
        50% {
            transform: rotate(180deg);

            opacity: 1;
           clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
        }
        100% {
            opacity: 0.2;
            transform: rotate(0deg);
            width: 100px;
            height: 87px;
            /*opacity: 1;*/
         clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
        }
    }


</style>
